<template>
  <el-input-number
    v-model="form[item.key]"
    :placeholder="placeholder"
    :style="style"
    :controls="false"
    controls-position="right"
    :min="item.min"
    :disabled="itemDisabled"
    :precision="item.precision"
    :step="item.step"
  />
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { InputNumber } from '../types'
import useDisabled from '../hooks/useDisabled'
import usePlaceholder from '@/hooks/usePlacehoder'

export default defineComponent({
  props: {
    item: {
      type: Object as PropType<InputNumber>,
      required: true,
    },
    form: {
      type: Object as PropType<Record<string, string>>,
      required: true,
    },
    placeholderId: {
      type: String,
      default: () => 'lang.placeholder.input',
    },
    disabled: {
      type: Boolean,
      required: true,
    },
  },
  setup(props) {
    const itemDisabled = useDisabled(props.disabled, props.item.disabled)
    const placeholder = usePlaceholder(props.item, 'lang.placeholder.input')
    return {
      itemDisabled,
      style: {
        width: props.item?.width ? props.item.width + 'px' : '100%',
      },
      placeholder,
    }
  },
})
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner {
  text-align: left;
}
</style>
